menu
Components / Grid
  • About
  • Contact
  • Legal information

Grid

blabla

Grid cell vertical align

cell on middle
cell on top
cell on bottom
cell stretch

<mdl-grid no-spacing="false" style="height:150px">
    <mdl-cell size="3" valign="MDLCellVAlign.Middle">cell on middle</mdl-cell>
    <mdl-cell size="3" valign="MDLCellVAlign.Top">cell on top</mdl-cell>
    <mdl-cell size="3" valign="MDLCellVAlign.Bottom">cell on bottom</mdl-cell>
    <mdl-cell size="3" valign="MDLCellVAlign.Stretch">cell stretch</mdl-cell>
</mdl-grid>
    

Cell size

1
1
1
1
1
1
1
1
1
1
1
1
4
4
4
6
4
2
6 (8 tablet)
4 (6 tablet)
2 (4 phone)

<mdl-grid>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
    <mdl-cell size="1" >1</mdl-cell>
</mdl-grid>
<mdl-grid>
    <mdl-cell size="4" >4</mdl-cell>
    <mdl-cell size="4" >4</mdl-cell>
    <mdl-cell size="4" >4</mdl-cell>
</mdl-grid>
<mdl-grid>
    <mdl-cell size="6" >6</mdl-cell>
    <mdl-cell size="4" >4</mdl-cell>
    <mdl-cell size="2" >2</mdl-cell>
</mdl-grid>
<mdl-grid>
    <mdl-cell size="6" tablet="8" >6 (8 tablet)</mdl-cell>
    <mdl-cell size="4" tablet="6" >4 (6 tablet)</mdl-cell>
    <mdl-cell size="2" phone="2"  >2 (4 phone)</mdl-cell>
</mdl-grid>